@color: #48cfad;
@colorError: #f92808;
@colorY: #f4ea2a;
.table-tbody-select{
  tr{
    cursor: pointer;
  }
  tr:hover{
    background-color: #48cfad !important;
    color: #fff;
  }
  tr:nth-of-type(odd).active,tr.active{
    background-color: #48cfad !important;
    color: #fff;
    th,td{
      background-color: transparent !important;
    }
  }
}

//ios类型切换类型
.read-only-body{
  position: relative;
  width: 80px;
  height: 28px;
  box-sizing: border-box;
  margin: auto;
  .bg , input , .circle{
    position: absolute;
  }
  .bg{
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 1;
    border-radius: 20px;
    border: 1px solid #ccc;
    -webkit-transition: all 0.25s ;
    -moz-transition: all 0.25s ;
    -ms-transition: all 0.25s ;
    -o-transition: all 0.25s ;
    transition: all 0.25s ;
  }
  > input{
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 3;
    left:0;
    top: -3px;
    cursor: pointer;
    &:checked ~ .circle{
      left: 54px;
      background-color: #fff;
    }
    &:checked ~ .bg{
      background-color: #48cfad;
    }
  }
  .circle{
    left:2px;
    top: 2px;
    width: 24px;
    height: 24px;
    background-color: #48cfad;
    border-radius: 50%;
    z-index: 2;
    -webkit-transition: all 0.25s ;
    -moz-transition: all 0.25s ;
    -ms-transition: all 0.25s ;
    -o-transition: all 0.25s ;
    transition: all 0.25s ;
  }

}

/*卷详细*/
.roll-d-list{
  margin: 0;
  padding: 20px;
  box-sizing: border-box;
  background-color: #fff;
  &:before{
    content: " ";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
  }
  &:after{
    content: " ";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
  }
  li{
    margin-bottom: 20px;
    display: block;
    width: 50%;
    height : 40px;
    float: left;
    border-bottom: 1px solid #ededed;
    .key,.value{
      display: block;
      float: left;
      text-align: center;
    }
    .key{
      width: 150px;
      text-align: justify;
    }
    .read-only-body{
      margin-top: -3px;
    }
    .is-black{
      > input{
        &:checked ~ .ip-text{
          display: block;
        }
      }
      .ip-text{
        width: 250px;
        height: 30px;
        position: absolute;
        left: 120%;
        display: none;
        input{
          position: absolute;
          width: 100%;
          height: 100%;
          background-color: transparent;
          left:0;
        }
      }
    }
  }
}

.system-body{
  width: 100%;
  box-sizing: border-box;
  padding: 0 25px 25px 25px;
  .title{
    text-align: center;
    padding-bottom: 25px;
    border-bottom: 1px solid #ededed;
    font-size: 28px;
    color: @color;
    &.error{
      color: @colorError;
    }
  }
  .type-list{
    width: 100%;
    li{
      width: 20%;
      float: left;
      text-align: center;
      margin-bottom: 30px;
      font-size: 16px;
      color: #ccc;
      padding-bottom: 20px;
      box-sizing: border-box;
      perspective: 1500px;
      transform-style: preserve-3d;
      padding-top: 50px;
      a{
        color: #ccc;
      }
      &.e{

        position: relative;
        .error-point{
          width: 70px;
          height: 30px;
          position: absolute;
          border-radius: 6px;
          border:1px solid #ccc;
          padding: 2px;
          -webkit-transition: all 2s ;
          -moz-transition: all 2s ;
          -ms-transition: all 2s ;
          -o-transition: all 2s ;
          transition: all 2s ;
          left:50%;
          top:20px;
          margin-left: -35px;
          animation:mymove 1s linear infinite;
          -moz-animation:mymove 1s linear infinite;
          -webkit-animation:mymove linear 1s infinite;
          -o-animation:mymove 1s linear infinite;
          &:after,&:before{
            content: " ";
            width: 50%;
            height: 100%;
            display: block;
            float: left;
            border-radius: 50%;
          }
          &:after{
            background-color: @colorError;
          }
          &:before{
            background-color: #31b0d5;
          }
        }
        img{
          animation:mymove1 0.5s linear infinite;
          -moz-animation:mymove1 0.5s linear infinite;
          -webkit-animation:mymove1 0.5s linear  infinite;
          -o-animation:mymove1 0.5s linear infinite;
        }
        @keyframes mymove{
          0%{
            transform:rotateY(0deg);
          }
          50%{
            transform:rotateY(360deg);
          }
          100%{
            transform:rotateY(720deg);
          }
        }
        @keyframes mymove1{
          0%{
            opacity: 0;
          }
          100%{
            opacity: 0.5;
          }
          100%{
            opacity: 1;
          }
        }
      }
    }
    img{
      max-width: 150px;
      vertical-align: bottom;
    }
    &:after{
      content: " ";
      display: block;
      visibility: hidden;
      height:0;
      clear: both;
    }
  }
}

.system-details{
  background-color: #fff;
  .header {
    width: 250px;
    font-size:28px;
    color: @color;
    text-align:center;
    padding:10px 0;
    margin:0 auto;
    position: relative;
  }

  .body {
    width: 98%;
    height: 200px;
    margin:0 auto;
    border:1px solid #ededed;
    overflow:hidden;
  }

  .body-l {
    padding:20px 5px 0 30px;
    float:left;
  }

  .body-r {
    width: 99%;
    height:100%;
    float:left;
  }

  .body-rr {
    width: 95%;
    height:70%;
    float:left;
    margin-top:10px;
    border:1px solid #ededed;
    box-sizing: border-box;
    padding: 10px;
    font-size: 24px;
    color: @colorError;
  }
  .img {
    display:block;
    width: 48px;
    height: 48px;
    margin:0 auto;
  }

  .center {
    width: 250px;
    font-size:28px;
    color: @color;
    text-align:center;
    padding:20px 0;
    margin:0 auto;
  }

  .content {
    width: 98%;
    height: 200px;
    margin:0 auto;
    border:1px solid #ccc;
    overflow:hidden;
  }
  .content-a {
    width:16.6%;
    float: left;
    cursor: pointer;
  }
  .content-a>p {
    font-size:18px;
    color:#ccc;
    text-align:center;
    padding-top:30px;
  }
  .content-a>img {
    display:block;
    width:100px;
    height:100px;
    margin:0 auto;
  }

  .xinxi {
    width: 250px;
    font-size:28px;
    color: green;
    text-align:center;
    padding:10px 0;
    margin:0 auto;
  }

  .footer {
    width: 98%;
    margin:0 auto;
    border:1px solid #ccc;
    display: none;
  }

  .footer>textarea {
    width: 100%;
    height: 125px;
  }

  .footer-f {
    width: 100%;
    height: 100px;
    line-height: 100px;
  }
  .footer-t,.footer-c{
    line-height: 40px;
    font-size: 24px;
  }
  .text{
    font-size: 20px;
    text-align: justify;
  }
}